<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #chartBox {
            margin: 0 auto;
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="chartBox"></div>
    <script src="../../js/common.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('chartBox'));

        var option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '风险等级',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 335, name: '高风险' },
                        { value: 310, name: '中风险' },
                        { value: 234, name: '低风险' },
                        // ... 其他类别数据
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        myChart.setOption(option);

        myChart.on('click', function (params) {
            console.log(1111, params)
            var detailSeries = option.series[0];
            // 如果当前已经选中，则展示详细数据
            if (params.name === '高风险') {
                // 设置详细数据饼图的数据
                detailSeries.data = [
                    { value: 335, name: '类别1' },
                    { value: 310, name: '类别2' },
                    { value: 234, name: '类别3' },
                    // ... 其他类别数据
                ];
            } else {
                // 否则隐藏详细数据
                detailSeries.data = [];
            }

            myChart.setOption({
                series: [detailSeries]
            });
        });
    </script>
</body>

</html>